<template>
  <span>岗位管理</span>
  <el-button text type="primary" @click="addJobDialog = true">添加岗位</el-button>
  <hr/>
  <el-table :data="jobList" stripe style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <el-descriptions :column="2" border title="岗位详情">
          <template #extra>
            <el-button type="primary" @click="openEditDialog(props.row)">编辑</el-button>
            <el-popconfirm
                cancel-button-text="取消"
                confirm-button-text="确定"
                title="确定删除吗?"
                @confirm="deleteJob(props.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
          <el-descriptions-item label="职位名称">{{ props.row.name }}</el-descriptions-item>
          <el-descriptions-item label="企业名称">{{ props.row.enterpriseName }}</el-descriptions-item>
          <el-descriptions-item label="创建日期">
            {{ props.row.createdDate.substring(0, 10) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新日期">
            {{ props.row.updatedDate }}
          </el-descriptions-item>
          <el-descriptions-item label="职位类型">{{ props.row.jobTypeStr }}</el-descriptions-item>
          <el-descriptions-item label="教育背景要求">{{ props.row.educationalRequirementsStr }}</el-descriptions-item>
          <el-descriptions-item label="工作地址">{{ props.row.workAddress }}</el-descriptions-item>
          <el-descriptions-item label="面议工资">{{ props.row.faceTalkSalary ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item v-if="!props.row.faceTalkSalary" label="最低薪资">
            {{ props.row.minSalary }}{{ props.row.minSalaryUnit }}/{{ props.row.salaryTime }}
          </el-descriptions-item>
          <el-descriptions-item v-if="!props.row.faceTalkSalary" label="最高薪资">
            {{ props.row.maxSalary }}{{ props.row.maxSalaryUnit }}/{{ props.row.salaryTime }}
          </el-descriptions-item>
          <el-descriptions-item label="优先专业" span="2">
            {{ props.row.preferredMajors }}
          </el-descriptions-item>
          <el-descriptions-item label="任职要求" span="2">{{ props.row.requirements }}</el-descriptions-item>
          <el-descriptions-item label="职位描述" span="2">{{ props.row.description }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-table-column>
    <el-table-column label="职位名称" prop="name"></el-table-column>
    <el-table-column label="招聘类型" prop="jobTypeStr"></el-table-column>
  </el-table>
  <div>
    <el-dialog v-model="addJobDialog" title="添加岗位">
      <el-form :model="addJobForm" label-position="left" label-width="100px">
        <!-- 基础信息 -->
        <el-form-item label="职位名称">
          <el-input v-model="addJobForm.name"></el-input>
        </el-form-item>

        <!-- 职位详情 -->
        <el-form-item label="招聘类型">
          <el-select v-model="addJobForm.jobType" placeholder="请选择招聘类型">
            <el-option
                v-for="(item, key) in jobTypes"
                :key="key"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位描述">
          <el-input v-model="addJobForm.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="岗位要求">
          <el-input v-model="addJobForm.requirements" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="学历要求">
          <el-select v-model="addJobForm.educationalRequirements" placeholder="请选择学历要求">
            <el-option
                v-for="(item, key) in educationLevels"
                :key="key"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地址">
          <el-input v-model="addJobForm.workAddress"></el-input>
        </el-form-item>

        <!-- 优先专业 -->
        <el-form-item label="优先专业">
          <el-input v-model="editJobForm.preferredMajors"></el-input>
        </el-form-item>

        <!-- 薪资信息 -->
        <el-form-item label="是否面议">
          <el-switch v-model="addJobForm.faceTalkSalary"></el-switch>
        </el-form-item>
        <div v-if="!addJobForm.faceTalkSalary">
          <el-form-item label="最低薪资">
            <el-input v-model.number="addJobForm.minSalary"></el-input>
            <el-select v-model="addJobForm.minSalaryUnit" placeholder="请选择单位">
              <el-option value="百">百</el-option>
              <el-option value="千">千</el-option>
              <el-option value="万">万</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最高薪资">
            <el-input v-model.number="addJobForm.maxSalary"></el-input>
            <el-select v-model="addJobForm.maxSalaryUnit" placeholder="请选择单位">
              <el-option value="百">百</el-option>
              <el-option value="千">千</el-option>
              <el-option value="万">万</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计薪时间">
            <el-select v-model="addJobForm.salaryTime" placeholder="请选择计薪时间">
              <el-option value="小时">小时</el-option>
              <el-option value="天">天</el-option>
              <el-option value="周">周</el-option>
              <el-option value="月">月</el-option>
              <el-option value="年">年</el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 提交按钮区域 -->
        <el-form-item>
          <el-button type="primary" @click="addJob(addJobForm)">提交</el-button>
          <el-button type="info" @click="cancelAddJob">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="editDialog" title="修改岗位信息">
      <el-form :model="editJobForm" label-position="left" label-width="100px">
        <!-- 基础信息 -->
        <el-form-item label="职位名称">
          <el-input v-model="editJobForm.name"></el-input>
        </el-form-item>
        <!-- 职位详情 -->
        <el-form-item label="招聘类型">
          <el-select v-model="editJobForm.jobType" placeholder="请选择招聘类型">
            <el-option
                v-for="(item, key) in jobTypes"
                :key="key"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位描述">
          <el-input v-model="editJobForm.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="岗位要求">
          <el-input v-model="editJobForm.requirements" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="学历要求">
          <el-select v-model="editJobForm.educationalRequirements" placeholder="请选择学历要求">
            <el-option
                v-for="(item, key) in educationLevels"
                :key="key"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地址">
          <el-input v-model="editJobForm.workAddress"></el-input>
        </el-form-item>

        <!-- 优先专业 -->
        <el-form-item label="优先专业">
          <el-input v-model="editJobForm.preferredMajors"></el-input>
        </el-form-item>

        <!-- 薪资信息 -->
        <el-form-item label="是否面议">
          <el-switch v-model="editJobForm.faceTalkSalary"></el-switch>
        </el-form-item>
        <div v-if="!editJobForm.faceTalkSalary">
          <el-form-item label="最低薪资">
            <el-input v-model.number="editJobForm.minSalary"></el-input>
            <el-select v-model="editJobForm.minSalaryUnit" placeholder="请选择单位">
              <el-option value="百">百</el-option>
              <el-option value="千">千</el-option>
              <el-option value="万">万</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最高薪资">
            <el-input v-model.number="editJobForm.maxSalary"></el-input>
            <el-select v-model="editJobForm.maxSalaryUnit" placeholder="请选择单位">
              <el-option value="百">百</el-option>
              <el-option value="千">千</el-option>
              <el-option value="万">万</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计薪时间">
            <el-select v-model="editJobForm.salaryTime" placeholder="请选择计薪时间">
              <el-option value="小时">小时</el-option>
              <el-option value="天">天</el-option>
              <el-option value="周">周</el-option>
              <el-option value="月">月</el-option>
              <el-option value="年">年</el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 提交按钮区域 -->
        <el-form-item>
          <el-button type="primary" @click="updateJob(editJobForm)">修改</el-button>
          <el-button type="info" @click="cancelEditDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {
  educationLevels,
  type EnterpriseInterface,
  type JobInterface,
  jobTypes,
  type ResponseInterface
} from "@/model/type";
import {addJobAPI, deleteJobAPI, getJobListByEnterpriseAPI, updateJobAPI} from "@/api/JobAPI";
import {ElMessage} from "element-plus";

const enterprise: EnterpriseInterface = reactive(JSON.parse(localStorage.getItem("user") || "{}"))
const addJobDialog = ref(false)
const addJobForm = reactive<JobInterface>({
  description: "",
  educationalRequirements: "",
  enterpriseId: "",
  enterpriseName: "",
  faceTalkSalary: false,
  id: "",
  jobType: "",
  maxSalary: 0,
  maxSalaryUnit: "千",
  minSalary: 0,
  minSalaryUnit: "千",
  name: "",
  preferredMajors: "",
  requirements: "",
  salaryTime: "月",
  workAddress: ""
})
const jobList = reactive<Array<JobInterface>>([])

async function addJob(job: JobInterface) {
  job.enterpriseId = enterprise.id
  job.enterpriseName = enterprise.name
  const r: ResponseInterface = await addJobAPI(job)
  if (r.code === 200) {
    //删除jobList所有元素，重新获取
    jobList.splice(0, jobList.length)
    await getJobListByEnterpriseAPI(localStorage.getItem("token")).then(res => {
      jobList.push(...res.data)
    })
    ElMessage.success("添加成功")
    cancelAddJob()
  }
}

function cancelAddJob() {
  //初始化addJobForm
  Object.assign(addJobForm, {
    description: "",
    educationalRequirements: "",
    enterpriseId: "",
    enterpriseName: "",
    faceTalkSalary: false,
    id: "",
    jobType: "",
    maxSalary: 0,
    maxSalaryUnit: "千",
    minSalary: 0,
    minSalaryUnit: "千",
    name: "",
    preferredMajors: "",
    requirements: "",
    salaryTime: "月",
    workAddress: ""
  })
  addJobDialog.value = false
}

// --- 修改
const editDialog = ref(false)
const editJobForm = reactive<JobInterface>({
  createdDate: undefined,
  description: "",
  educationalRequirements: "",
  enterpriseId: "",
  enterpriseName: "",
  faceTalkSalary: false,
  id: "",
  jobType: "",
  maxSalary: 0,
  maxSalaryUnit: undefined,
  minSalary: 0,
  minSalaryUnit: undefined,
  name: "",
  preferredMajors: "",
  requirements: "",
  salaryTime: undefined,
  updatedDate: undefined,
  workAddress: ""
})

function openEditDialog(job: JobInterface) {
  editDialog.value = true
  Object.assign(editJobForm, job)
}

function cancelEditDialog() {
  editDialog.value = false
}

async function deleteJob(job: JobInterface) {
  const r: ResponseInterface = await deleteJobAPI(job);
  if (r.code === 200) {
    jobList.forEach((item, index) => {
      if (item.id === job.id) {
        jobList.splice(index, 1)
      }
    })
    ElMessage.success("删除成功")
  }
}

async function updateJob(job: JobInterface) {
  const r: ResponseInterface = await updateJobAPI(job)
  if (r.code === 200) {
    jobList.forEach((item, index) => {
      if (item.id === job.id) {
        jobList.splice(index, 1, job)
      }
    })
    editDialog.value = false
    ElMessage.success("修改成功")
  }
}

onMounted(async () => {
  const r: ResponseInterface = await getJobListByEnterpriseAPI(localStorage.getItem("token") || "")
  if (r.code == 200) {
    jobList.push(...r.data)
  }
})
</script>

<style scoped>

</style>